<template>
  <div>
    输入书籍名称: <input type="text" v-model="book">
    <el-button type="primary" @click="AddBook">添加书籍</el-button>
    <br/>
    <el-button type="primary" @click="router.go(-1)">回退到上个页面</el-button>
    <router-link :to="{ name: 'Artclelist', query: { pageSize: 24, pageNum: 39, total: 240 } }">
      <el-button type="primary">去文章列表</el-button>
    </router-link>
    <el-button type="primary" @click="fn">去文章列表</el-button>
    <ul>
      <li v-for="(item) in list" :key="item.id">
        {{ item.bookName }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
defineOptions({
  name: 'BookPage'
})
const book = ref('')
const AddBook = () => {
  list.value.push(
    { id: list.value.length + 1, bookName: book.value })
}
const fn = () => {
  router.push({
    path: 'artclelist',
    query: {
      pageSize: 46,
      pageNum: 36,
      total: 90
    }
  })
}
const list = ref([
  { id: 1, bookName: '活着'},
  { id: 2, bookName: '在细雨中呐喊'},
  { id: 3, bookName: '有人自林中坠落'}
])

</script>